<template>
  <div class="login-wrap">
    <div class="ms-title">
      <span style="font-size: 6vh;">车辆在途实时监控平台</span>

    </div>
    <div class="ms-login">
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="0px">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" icon="user" @keyup.enter.native="handleLogin">
            <template slot="prepend">用户</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="loginForm.password" icon="lock"
                    @keyup.enter.native="handleLogin">
            <template slot="prepend">密码</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="captcha" class="code-wape">
          <el-input v-model="loginForm.captcha" placeholder="请输入左侧图片验证码" @keyup.enter.native="handleLogin"
                    class="code-input" clearable>
            <template slot="prepend">
              <img alt="图片验证码" title="看不清换一张" class="code-image" @click="getCaptcha" :src="captchaPath"
                   ref="resetCodeImage">
            </template>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="handleLogin" :loading="loading">登录</el-button>
        </div>
        <el-form-item prop="rememberMe" class="rememberme-wape">
          <!-- <el-checkbox v-model="isRememberMe">记住我</el-checkbox> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="ms-focus-on-wechat">
      <div style="color:#fff;margin-bottom:10px;font-size:12px;margin-top:20px;">微信小程序入口</div>
      <img src="static/img/login/xiaochengxu.jpg" width="120" height="120">
    </div>
    <div class="ms-tips" :style="{'top':msTipsTopValue+'px'}">温馨提示：平台支持Google Chrome版本和360浏览器（采用极速模式），建议推荐<a style="color:#c2c3c3;" href="https://zhys.dacyun.com/welcome/tools/49.0.2623.112_chrome_installer.exe" target="_blank">谷歌浏览器</a>。</div>
  </div>
</template>

<script>
  import * as Tool from '@/utils/tool'
  import * as $http from '@/api/login'
  export default {
    name: 'login',
    data() {
      return {
        loading: false,
        isRememberMe: true,
        captchaPath: '',
        loginForm: {
          username: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        msTipsTopValue: Tool.getClientHeight()*0.25+380,
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]
          ,
          captcha: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ]
        }
      };
    },
    created() {
      this.getCaptcha()
    },
    mounted: function() {
      const _this = this;
      window.addEventListener('resize', function() {
        _this.msTipsTopValue = Tool.getClientHeight()*0.25+380;
      });
      this.checkBrowser();		// 检测浏览器
    },
    methods: {
      checkBrowser(){
        var ua = navigator.userAgent.toLocaleLowerCase();
        if (ua.match(/chrome/) == null && ua.match(/firefox/) == null) {		// 既不是chrome内核，也不是火狐浏览器
          this.$alert(`系统检测到您的浏览器可能不兼容本系统，建议您下载以下浏览器：<br /><br /><a href="https://zhys.dacyun.com/welcome/tools/49.0.2623.112_chrome_installer.exe" target="_blank">Chrome下载</a>&nbsp;或者&nbsp;<a href="https://zhys.dacyun.com/welcome/tools/360cse_9.5.0.138.exe" target="_blank">360极速浏览器下载</a>`, '温馨提示', {
            dangerouslyUseHTMLString: true
          });
        }
      },
      getCaptcha() {
        let _this = this;
        this.loginForm.uuid = Tool.getUUID()
        $http.getCodeKeySrc(this.loginForm.uuid).then(data => {
          _this.captchaPath = data;
        });
      },
      encode(val, times) {
        if (times <= 0) {
          return val;
        }
        let res = val;
        for (let i = 0; i < times; i++) {
          res = Tool.Base64.encode(res);
        }
        return res;
      },
      handleLogin() {
        var _this = this;
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true
            let postData = {};
            postData.username = _this.encode(_this.loginForm.username, 3);
            postData.password = _this.encode(_this.loginForm.password, 3);
            postData.uuid = _this.loginForm.uuid;
            postData.captcha = _this.loginForm.captcha;

            this.$store.dispatch('LoginByUsername', postData).then((response) => {
              this.loading = false
              if (response.code == 0) {
                let redirectTo = _this.$route.query.redirect || '/'
                _this.$router.push({path: redirectTo})
              } else {
                _this.getCaptcha();
                _this.loginForm.captcha = '';
                _this.$message({
                  showClose: true,
                  message: '登录失败：' + response.msg,
                  type: 'error'
                });
              }
            }).catch(() => {
              this.loading = false
            })

          } else {
            console.log('error submit!!')
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
  .login-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 300px;
    overflow-y: auto;
    background-color: #f5f7f9;
    background-image: url('~@/assets/login-imgs/loginbg.jpg');
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
  }

  .ms-title {
    position: absolute;
    top: 10vh;
    width: 100vw;
    text-align: center;
    font-size: 4vh;
    line-height: 6vh;
    color: #fff;
    font-weight: 500;

  }

  .ms-login {
    position: absolute;
    left: 50vw;
    top: 50vh;
    width: 390px;
    height: 330px;
    margin: 0;
    margin-left: -195px;
    margin-top: -25vh;
    padding: 40px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .code-image {
    height: 38px;
    width: 110px;
    line-height: 40px;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  .login-btn {
    text-align: center;
  }

  .login-btn button {
    width: 100%;
    height: 36px;
  }

  .ms-title {
    position: absolute;
    top: 5vh;
    width: 100vw;
    text-align: center;
    font-size: 4vh;
    line-height: 6vh;
    color: #fff;
    font-weight: 500;

  }

  .ms-tips {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #f00c2d;
    font-size: 120%;
  }

  .ms-login {
    position: absolute;
    left: 50vw;
    top: 50vh;
    width: 390px;
    margin: 0;
    margin-left: -195px;
    margin-top: -25vh;
    padding: 40px;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
  }

  .ms-focus-on-wechat {
    position: absolute;
    left: 50vw;
    top: 50vh;
    margin: 0;
    margin-left: 200px;
    margin-top: -25vh;
    padding: 10px 40px;
    text-align: center;
  }
</style>
